<template>
  <view v-show="visible" :class="globalStore.messageStatus" class="message">
    <text class="iconfont" :class="setIcon()" />
    {{ globalStore.message }}
  </view>
</template>
<script setup lang="ts">
let visible = ref(false);
const globalStore = useGlobalStore();

//设置图标
const setIcon = () => {
  let flag;

  switch (globalStore.messageStatus) {
    case "error":
      flag = "icon-cuowu";
      break;
    case "warning":
      flag = "icon-tishi";
      break;
    default:
      flag = "icon-Success-Small";
      break;
  }

  return flag;
};

watch(
  () => globalStore.message,
  () => globalStore.message && displayMessage()
);

const displayMessage = () => {
  visible.value = true;
  setTimeout(() => {
    // 关闭消息提示弹框
    visible.value = false;
    globalStore.clearMessage();
  }, 2000);
};
</script>
<style lang="scss" scoped src="./index.scss"></style>
